import React, { Component } from 'react';

import {
    Text,
    View,
    StyleSheet,
    SafeAreaView,
    TextInput,
    Button,
    Dimensions,
    StatusBar,
    TouchableOpacity, Image,
} from 'react-native';
import AsyncStorage from "@react-native-async-storage/async-storage";

export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            infomation:{
                name:"",
                motto:"",
                url:"",
                datebith:"2020年7月4",
                createdate:"",
                level:"",
                intoduce:"大家好，我叫[你的名字]，来自[你的城市或国家]。我是一名[你的职业或专业]，在[你的工作领域或专业]有着[工作年数或学习年数]年的经验。我对[你的兴趣或专长]非常热情，并且在此领域有着广泛的知识和实践经验。"
            }
        }
    }

    async componentDidMount() {

        try {
            let token=await AsyncStorage.getItem("token")
            let response = await fetch(
                "http://10.86.3.157:8080/user",
                {
                    method: "GET",
                    headers: {
                        'Content-Type': "application/json",
                        'token':token,
                    },


                }
            )
            let json = await response.json();
            if (json.status) {
                console.log(json)
                this.setState({
                    infomation:{
                        name:json.data.name,
                        motto:json.data.interesting,
                        url:"",
                        datebith:json.data.birth,
                        createdate:json.data.createTime,
                        level:"",
                        intoduce:"大家好，我叫[你的名字]，来自[你的城市或国家]。我是一名[你的职业或专业]，在[你的工作领域或专业]有着[工作年数或学习年数]年的经验。我对[你的兴趣或专长]非常热情，并且在此领域有着广泛的知识和实践经验。"
                    }
                })

            } else {
                console.log("Token stored failed");

            }
        } catch (error) {
            console.error(error);
        }
    }


    render() {
        return (
                <View>
                    <StatusBar translucent backgroundColor="transparent" barStyle={"dark-content"} />
                <SafeAreaView style={styles.safearea}>

                   <View style={styles.imageview}>
                       <Image source={require("./touxiang.png")} style={styles.imageview_image}>

                       </Image>
                       <View style={{flexDirection:"column"}}>
                           <Text style={styles.imageview_view_text1}>
                               Lyxio
                           </Text>
                           <Text style={styles.imageview_view_text2}>
                               2020年07月24日
                           </Text>
                       </View>
                   </View>
                    <View style={styles.infoview}>
                        <View style={styles.infoview_view}>
                            <Text style={styles.infoview_text1}>您的生日：</Text>
                            <Text style={styles.infoview_text2}>{this.state.infomation.datebith}</Text>
                        </View>
                        <View style={styles.infoview_view}>
                            <Text style={styles.infoview_text1}>注册日期：</Text>
                            <Text style={styles.infoview_text2}>{this.state.infomation.createdate}</Text>
                        </View>
                        <View style={styles.infoview_view}>
                            <Text style={styles.infoview_text1}>你的等级：</Text>
                            <Text style={styles.infoview_text2}>{this.state.infomation.level}</Text>
                        </View>
                        <View style={styles.infoview_view}>
                            <Text style={styles.infoview_text1}>自我介绍:</Text>
                        </View>
                        <Text style={styles.infoview_text3} >{this.state.infomation.intoduce}</Text>
                    </View>
                    <View style={styles.buttonview}>
                        <TouchableOpacity style={styles.buttonview_button}  >
                            <Text style={styles.buttonview_button_text}>修改信息</Text>
                        </TouchableOpacity>
                        <View style={styles.buttonview_fenge}></View>
                        <TouchableOpacity  style={styles.buttonview_button} >
                            <Text style={styles.buttonview_button_text}>注销登录</Text>
                        </TouchableOpacity>
                    </View>
                </SafeAreaView>
                </View>

        )
    }
}

const  styles=StyleSheet.create({
    safearea:{
        flex: 1,
        marginTop:Dimensions.get("window").height/25,
        backgroundColor:"#cccccc"
    },
    imageview: {
        flexDirection:"row",
        margin:30,height:Dimensions.get("window").width/2,
        backgroundColor:"#ffffff",
        borderRadius:20,
    },
    imageview_image:{
        width:Dimensions.get("window").width/4,
        resizeMode:"contain",
        marginLeft:20,
        borderRadius:Dimensions.get("window").width/4,
    },
    imageview_view_text1:{
        marginTop:50,marginLeft:30,
        height:Dimensions.get("window").width/8,
        fontSize:30,
        color:"#FF6347",
    },
    imageview_view_text2:{
        margin:10,
        marginLeft:30,
        height:Dimensions.get("window").width/8,
        fontSize:20,
        color:"#00BFFF",
    },
    infoview:{
        height:28*Dimensions.get("window").width/30,
        backgroundColor:"#ffffff",
        borderRadius:20,
        margin:30
    },
    infoview_view:{
        flexDirection:"row",
        height:Dimensions.get("window").height/15,
        margin:15,
        marginTop:2,
        marginBottom:2,
    },
    infoview_text1:{
        width:Dimensions.get("window").width/4,
        height:Dimensions.get("window").height/15,
        fontSize:15,
        textAlign:"left",
        textAlignVertical:"center",
        color:"#8B008B"
    },
    infoview_text2:{
        marginLeft:20,
        marginRight:20,
        height:Dimensions.get("window").height/15,
        fontSize:15,
        textAlign:"left",
        textAlignVertical:"center",
        color:"#aeaa56"
    },
    infoview_text3:{
        marginLeft:20,
        marginRight:20,
        height:Dimensions.get("window").height/6,
        fontSize:15,
        textAlign:"left",
        textAlignVertical:"center",
        color:"#aeaa56",

    },

    buttonview:{
        height:Dimensions.get("window").width/8,
        backgroundColor:"#1E90FF",
        borderRadius:20,
        margin:30,
        marginTop:5,
        flexDirection:"row"
    },
    buttonview_button:{
        width:(Dimensions.get("window").width-60)/2-1,
        height:Dimensions.get("window").width/8,

    },
    buttonview_button_text:{
        textAlign:"center",
        textAlignVertical:"center",
        height:Dimensions.get("window").width/8,
    },
    buttonview_fenge:{
        width:1,
        backgroundColor:"#000000",
    },
    infoview_fenge:{
        height:1,
        backgroundColor:"#ffffff",
    }

})